﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SY.aspx.cs" Inherits="BookS.SY" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
  
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>静读小苑</title>
<link href="css/public.css" type="text/css" rel="stylesheet"/>
    <link href="css/shouye.css" type="text/css" rel="stylesheet"/>
   <%-- <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all" />--%>
    <link rel="stylesheet" href="css/layui.css"/>
   <link href="bootstrap-3.3.7/dist/css/bootstrap.css" rel="stylesheet"/>
    
    <link href="css/btnn.css" rel="stylesheet"/>
</head>

<body>
 <!--顶部快捷菜单-->
     <form id="form1" runat="server">
    <div class="shortcut_v2013 alink_v2013">
        <div class="w">
            <ul class="fl 1h">
                <li class="fl">
                    <div class="menu">
                        <div class="menu_hd">
                            <a href="#">
                                
                                <img src="images/shopping_icon.png" style="width:12px;height:16px;" />
                                我的购物车
                            </a>
                            <b><em></em></b></div>
                        <div class="menu_bd">
                            <ul>
                                <li><a href="#">购买详情</a></li>
                                <li><a href="#">去购物车结算</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="fl"><i class="shortcut_s"></i></li>
                <li class="fl"><div class="menu_hd">您好，欢迎来到静读小苑！</div></li>
                <li class="fl"><div class="menu_hd"><a href="deng.aspx">请登录</a></div></li>
                <li class="fl"><div class="menu_hd"><a href="ZC.aspx">免费注册</a></div></li>
            </ul>
            <ul class="fr 1h">
                <li class="fl"><div class="menu_hd"><a href="#">我的订单</a></div></li>
                <li class="fl"><i class="shortcut_s"></i></li>
                <li class="fl"><div class="menu_hd"><a href="#">我的小苑</a></div></li>
                <li class="fl"><i class="shortcut_s"></i></li>
                <li class="fl"><div class="menu_hd"><a href="#">帮助中心</a></div></li>
                <li class="fl"><i class="shortcut_s"></i></li>
                <li class="fl"><div class="menu_hd"><a href="#">商家入驻</a></div></li>
                <li class="fl"><i class="shortcut_s"></i></li>
                <li class="fl">
                    <div class="menu">
                        <div class="menu_hd"><a href="#">个人中心</a><b><em></em></b></div>
                        <div class="menu_bd">
                            <ul>
                                <li><a href="#">编辑个人信息</a></li>
                                <li><a href="#">退出登录</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <span class="clr"></span>
        </div>
    </div>
    <!--顶部快捷菜单-->
    
     <!--顶部Logo及搜索-->
    <div class="header_2013">
        <div class="w">
            <div class="logo_v2013">
                <a href="#">
                    <img class="border_r" src="images/logo.jpg" width="120" height="50" />
                    <img src="images/jingduxiaoyuan.jpg" width="140" height="50" />
                </a>
            </div>
           
  <div class="form-group">
      <asp:TextBox ID="search" TextMode="SingleLine" runat="server" PlaceHolder="青春小说" Width="300px" Height="35px"></asp:TextBox>
      <div style="margin-top:-120px; margin-left:770px;"> 
          <button type="button" id="sBtn" class="btn btn-danger" style="width:80px;margin-top:-20px;">搜索</button>
         <%-- <asp:Button ID="sBtn" runat="server" Text="搜索" CssClass="btn1"/>--%>
      </div>
  </div>
     
        </div>  
    </div>
    
    <!--顶部Logo及搜索-->
         
    
     <!--  导航条    start-->
 	<div class="yHeader">
		<div class="shop_Nav">
			
            <div>
			<ul class="layui-nav" style="background-color: crimson;">
  <li class="layui-nav-item layui-this"><a href="SY.aspx">首页</a></li>
  <li class="layui-nav-item">
  
  </li>
  
  <li class="layui-nav-item">
    <a href="SO.aspx">新书热卖榜</a>
    <dl class="layui-nav-child">
      <dd><a href="SO.aspx">小说</a></dd>
      <dd><a href="SO.aspx">情感</a></dd>
      <dd><a href="SO.aspx">漫画</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="ST.aspx">图书畅销榜</a>
    <dl class="layui-nav-child">
      <dd><a href="ST.aspx">艺术</a></dd>
      <dd class="layui-this"><a href="ST.aspx">花艺</a></dd>
      <dd><a href="ST.aspx">茶艺</a></dd>
    </dl>
  </li>
      <li class="layui-nav-item"><a href="STH.aspx">童书绘本</a></li>
  <li class="layui-nav-item"><a href="SFO.aspx">小说文学</a></li>
 <li class="layui-nav-item"><a href="SFI.aspx">社科经管</a></li>
        <li class="layui-nav-item"><a href="SS.aspx">网络科技</a></li>
      <li class="layui-nav-item"><a href="SSEv.aspx">医学</a></li>
       <li class="layui-nav-item"><a href="SE.aspx">教材教辅</a></li>
        <li class="layui-nav-item"><a href="SN.aspx">生活艺术</a></li>

</ul>
         
		</div>
 	</div>
</div>
	<!--  导航条    end-->
    
    <div class="shou1">

    
  <div class="layui-header">
          <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll" style="background-color:crimson">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test" style="background-color:crimson">
           <li class="layui-nav-item"><a href="#" style="background-color:crimson">图书全部分类</a></li>
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">童书 育儿</a>
          <dl class="layui-nav-child">
            <dd><a href="STH.aspx">绘本</a></dd>
            <dd><a href="STH.aspx">趣味童书</a></dd>
            <dd><a href="STH.aspx">国学启蒙</a></dd>
            <dd><a href="STH.aspx">幼小衔接入学</a></dd>
               <dd><a href="STH.aspx">兴趣培养</a></dd>
          </dl>
        </li>
                  <li class="layui-nav-item">
          <a href="javascript:;">文学 小说</a>
          <dl class="layui-nav-child">
            <dd><a href="SFO.aspx">外国文学</a></dd>
            <dd><a href="SFO.aspx">国学</a></dd>
            <dd><a href="SFO.aspx">民间故事</a></dd>
              <dd><a href="SFO.aspx">青春</a></dd>
              <dd><a href="SFO.aspx">情感</a></dd>
              <dd><a href="SFO.aspx">科幻</a></dd>
              <dd><a href="SFO.aspx">职场</a></dd>
          </dl>
        </li>
           <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">社科 经管</a>
          <dl class="layui-nav-child">
            <dd><a href="SFI.aspx">经济读物</a></dd>
            <dd><a href="SFI.aspx">市场营销</a></dd>
            <dd><a href="SFI.aspx">房地产</a></dd>
            <dd><a href="SFI.aspx">中国共产党</a></dd>
               <dd><a href="SFI.aspx">领导人著作</a></dd>
          </dl>
        </li>
                  <li class="layui-nav-item">
          <a href="javascript:;">行业 职业</a>
          <dl class="layui-nav-child">
            <dd><a href="SS.aspx">电子商务</a></dd>
            <dd><a href="SS.aspx">医学科普</a></dd>
            <dd><a href="SS.aspx">室内装修</a></dd>
              <dd><a href="SS.aspx">计算机</a></dd>
              
          </dl>
        </li>       
                   <li class="layui-nav-item">
          <a href="javascript:;">教材 教辅</a>
          <dl class="layui-nav-child">
            <dd><a href="SE.aspx">小学教材</a></dd>
            <dd><a href="SE.aspx">科普</a></dd>
            <dd><a href="SE.aspx">读物</a></dd>
              <dd><a href="SE.aspx">公务员</a></dd>
              
          </dl>
        </li>   
                   <li class="layui-nav-item">
          <a href="javascript:;">生活 艺术</a>
          <dl class="layui-nav-child">
            <dd><a href="SN.aspx">成功学</a></dd>
            <dd><a href="SN.aspx">孕产</a></dd>
            <dd><a href="SN.aspx">亲子</a></dd>
              <dd><a href="SN.aspx">烹饪</a></dd>
              
          </dl>
        </li>   
      </ul>
    </div>
  </div>
</div>

       
  
        <div class="center">
        <div class="scenter">
           <div id="slide">
			<div class="imgs">
				<img src="images/图书01.jpg" style="width:1180px;height:400px;"/>
					<img src="images/图书02.jpg" style="width:1180px;height:400px;" />
					<img src="images/图书03.jpg" style="width:1180px;height:400px;" />
					<img src="images/图书04.jpg" style="width:1180px;height:400px;" />
					
			</div>
			<div class="pager">
				<a href="javascript:void(0)" class="on" data-num="1">1</a>
				<a href="javascript:void(0)"data-num="2">2</a>
				<a href="javascript:void(0)"data-num="3">3</a>
				<a href="javascript:void(0)"data-num="4">4</a>
				
			</div>
		</div>
        </div>
       <div class="scenter2">
           <div class="scenter21" id="scenter21" bigh="儿童启蒙经典诵读 唐诗三百首 完整版(60册)">
             <a href="#"> <img src="images/唐诗01.jpg" style="width:200px;height:200px;"/></a>
             
             <div class="scenter211">  <a href="#"><h2>儿童启蒙经典诵读 唐诗三百首 完整版(60册)</h2></a> 
                 <button type="button" class="btn btn-danger glyphicon glyphicon-shopping-cart">加入购物车</button></div>
             <div>  <a href="#">孙静 编 / 江西教育出版社</a></div>
               <div>
              <h1 style="color:orangered;">￥117.0</h1> 
              
           </div>
           </div>
           <div class="scenter22">
             <a href="#"> <img src="images/故事02.jpg" style="width:200px;height:200px;"/></a>
                <div class="scenter2201">  <a href="#"><h2>彼得兔和他的朋友们(全8册)</h2></a> 
               <button type="button" class="btn btn-danger glyphicon glyphicon-shopping-cart">加入购物车</button></div>
             <div>  <a href="#">(英)碧翠克丝·波特 著 孙静 译 / 西南师范大学出版社</a></div>
               <div>
              <h1 style="color:orangered;">￥62.4</h1> 
              
           </div>

           </div>
               
           <div class="scenter23">
             <a href="#"> <img src="images/幼小03.jpg" style="width:200px;height:200px;"/></a>
                    <div class="scenter2301">  <a href="#"><h2>幼小衔接学前测试卷 升级版(全8册)</h2></a> 
               <button type="button" class="btn btn-danger glyphicon glyphicon-shopping-cart">加入购物车</button></div>
             <div>  <a href="#">丘田 编 / 中国大百科出版社</a></div>
               <div>
              <h1 style="color:orangered;">￥96.0 </h1> 
              
           </div>
                
    </div>
    </div>

    </div>
    </div>
    <!-- 底部 -->
    <div class="promise_box">
    	<div class="w">
    		<ul>
        		<li><img src="images/promise_img01.jpg" /><span>365天不打烊</span></li>
        		<li><img src="images/promise_img02.jpg" /><span>无理由退换货</span></li>
        		<li><img src="images/promise_img03.jpg" /><span>担保交易</span></li>
        		<li><img src="images/promise_img04.jpg" /><span>先行赔付</span></li>
        		<li><img src="images/promise_img05.jpg" /><span>支持定制</span></li>
        	</ul>
    	</div>
    </div>
    <div class="bottom-links">
        <ul class="clearfix cols">
            <li class="col">
                <div class="bottom-links-title">关于我们</div>
                <ul class="clearfix bottom-links-items">
                    <li><a href="#">招聘英才</a></li>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">合作洽谈</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </li>
            <li class="col">
                <div class="bottom-links-title">客服中心</div>
                <ul class="clearfix bottom-links-items">
                    <li><a href="#">收货地址</a></li>
                    <li><a href="#">个人资料</a></li>
                    <li><a href="#">修改密码</a></li>
                </ul>
            </li>
            <li class="col">
                <div class="bottom-links-title">售后服务</div>
                <ul class="clearfix bottom-links-items">
                    <li><a href="#">退换货政策</a></li>
                    <li><a href="#">退款说明</a></li>
                    <li><a href="#">联系卖家</a></li>
                </ul>
            </li>
            <li class="col">
                <div class="bottom-links-title">帮助中心</div>
                <ul class="clearfix bottom-links-items">
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">积分兑换</a></li>
                    <li><a href="#">已购商品</a></li>
                    <li><a href="#">积分细则</a></li>
                </ul>
            </li>
            <li class="col">
            	<div class="bottom-links-title">锡好网公众号</div>
                <ul class="clearfix bottom-links-items">
                    <li>
                        <img src="images/weixin_big.jpg" />
                    </li>
                </ul>
            </li>
            <li class="col">
                <div class="bottom-links-title">关注我们</div>
                <ul class="clearfix bottom-links-items">
                    <li><img src="images/icon_sina.png" /><a href="#">新浪微博</a></li>
                    <li><img src="images/icon_tencent.png" /><a href="#">腾讯微博</a></li>
                    <li><img src="images/icon_dou.png" /><a href="#">豆瓣小站</a></li>
                    <li><img src="images/icon_weixin.png" /><a href="#">官方微信</a></li>
                </ul>
            </li>
            
        </ul>
    </div>
    <div class="footer_v2013 bottom-about">
        <div class="w">
            <p class="foot_p1">
                <a href="#">首页</a>|<a href="#">招聘英才</a>|<a href="#">广告合作</a>|<a href="#">联系我们</a>|<a href="#">关于我们</a>
            </p>
                <pre>
    经营许可证：苏B2-20130223备案许可证：苏ICP备13041162号-1360网站安全检测平台
    ©2013-2014 无锡太湖云电商网络科技发展有限公司   版权所有
                </pre>
        </div>
        <p>
            <a href="#"><img src="images/bottom_img01.png" /></a>
            <a href="#"><img src="images/bottom_img02.png" /></a>
            <a href="#"><img src="images/bottom_img03.png" /></a>
            <a href="#"><img src="images/bottom_img04.png" /></a>
            <a href="#"><img src="images/bottom_img05.png" /></a>
            <a href="#"><img src="images/bottom_img06.png" /></a>
            <a href="#"><img src="images/bottom_img07.png" /></a>
            <a href="#"><img src="images/bottom_img08.png" /></a>
            <a href="#"><img src="images/bottom_img09.png" /></a>
        </p>
    </div>


    <!-- 底部 -->
    <div class="fixed-buttons">
        <ul>
            <li><a href="#" class="fixed-weixin"><img src="images/fixed_weixin.png" /><div class="weixin-pic"><img src="images/weixin_big.jpg" /></div></a></li>
            <li><img id="imgBtn-to-top" src="images/back_top.png" /></li>
        </ul>
    </div>
         </form>
    <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="js/unslider.min.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
		<script>
			//轮播的函数 轮播参数n:数量 轮播参数m:时间
			function slide(n,m){
				var num=1;
				$('#slide .imgs').css('left','0px');//console.log('显示第'+num+'张图片');
				$('#slide .pager a').eq(0).addClass('on').siblings().removeClass('on');
				return{ 
					show:function(){
						setInterval(function(){
								num++;
								if(num>n){
									num=1;
								}
								$('#slide .imgs').css('left',-1180*(num-1)+'px');//console.log('显示第'+num+'张图片');
								$('#slide .pager a').eq(num-1).addClass('on').siblings().removeClass('on');
							},m);
						},
					swith:function(p){
						num=p;
						$('#slide .imgs').css('left',-1180*(num-1)+'px');//console.log('显示第'+num+'张图片');
						$('#slide .pager a').eq(num-1).addClass('on').siblings().removeClass('on');
					}
				};					
			}
			//执行轮播定时器
			var s=slide(4,2000);
			s.show();
			//给页码添加事件
			$('#slide .pager a').on('click',function(){
				var x=$(this).data('num');
				    s.swith(x);
            })
           
        </script>	
   <%-- //导航--%>
    <script src="js/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use('element', function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>
</body>
</html>
<%--//left--%>
    <script>
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
            
        $("#sBtn").click(function () {
            var text = $("#search").val();
            var src = $("#scenter21").attr("bigh");
            if (src.match(text)) {
                window.location.hash = "#scenter21";
                 }
        });
    </script>
   
</body>
</html>
